<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function GetXmlHttpObject() {
				var xmlHttp = null;
				try {
					// for Firefox, Opera 8.0+, Safari
					xmlHttp = new XMLHttpRequest();
				} catch(e) {
					// for Internet Explorer
					try {
						xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
					} catch(e) {
						xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
					}
				}
				return xmlHttp;
			}

			function fun() {
				var method = document.getElementById("method").value;
				var url = document.getElementById("url").value;
				if(method == "post") {
					postf(url);
				} else {
					getf(url);
				}
			}

			function getf(url) {
				var req = document.getElementById("req").value;
				var rep = document.getElementById("rep");
				var postData = JSON.parse(req);
				//alert(req)
				var xmlHttp
				xmlHttp = GetXmlHttpObject();
				var url = url + "?" //设置要提交action到后台的那个处理请求的文件名
				var arr = []
				for(var a in postData) {
					arr.push(a + '=' + postData[a])
				}
				url = url + arr.join('&') + "&sssid=" + Math.random() //为这个路径加上一个随机数
				rep.value = url
				xmlHttp.open("GET", url, true) //定义请求的参数
				xmlHttp.onreadystatechange = function() {
					var XMLHttpReq = xmlHttp;
					if(XMLHttpReq.readyState == 4) {
						if(XMLHttpReq.status == 200) {
							rep.value = XMLHttpReq.responseText;

						}
					}
				};
				xmlHttp.open("GET", url, true) //定义请求的参数
				xmlHttp.send() //发送请求
			}

			function postf(url) {
				var req = document.getElementById("req").value;
				var rep = document.getElementById("rep");
				var postData = JSON.parse(req);
				//这里进行HTTP请求
				var oAjax = GetXmlHttpObject()
				//post方式打开文件
				oAjax.open('post', url + '?=' + Math.random(), true);
				//post相比get方式提交多了个这个
				oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				//post发送数据
				oAjax.send(postData);
				oAjax.onreadystatechange = function() {　　 //当状态为4的时候，执行以下操作					　　
					if(oAjax.readyState == 4 && oAjax.status == 200) {　　　　
						try {　　　　　
							rep.value = oAjax.responseText;　　　　
						} catch(e) {　　　　　　
							alert('你访问的页面出错了');　　　　
						};　　
					};
				};
			}
		</script>
	</head>

	<body>
		<form id="form1" action="" method="post">
			<select id="method">
				<option value="get">get</option>
				<option value="post" selected>post</option>
			</select>
			<input style="width:600px" type="text" name="" id="url" value="" placeholder="请求路径" />
			<input type="button" onclick="javascript:fun()" value="提交" /><br/>
			<textarea id="req" rows="36" cols="60"></textarea>
			<textarea id="rep" rows="36" cols="60"></textarea>
			<br>

		</form>
	</body>

</html>